<template>
  <div>
    <div class="header">
      <div class="content" v-if="userInfo.openId">
        <div class="user-info">
          <i-avatar :src="userInfo.avatarUrl" size="large"></i-avatar>
          <span>{{userInfo.nickName}}</span>
        </div>
        <div class="user-set">
          <i-icon size="28" color="#FFF" type="enter" />
        </div>
      </div>
      <button v-else class="login-btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="doLogin">点击登录</button>
    </div>
    <v-split></v-split>
    <div class="order">
      <div class="top">
        <div class="title">我的订单</div>
        <div class="more">
          <span>查看跟多订单</span>
          <i-icon class="more-icon" color="#b3b3b3" size="18" type="enter" />
        </div>
      </div>
      <div class="wrap">
        <div>
          <i-icon size="34" color="#b4282d" type="financial_fill" />
          <h1>待付款</h1>
        </div>
        <div>
          <i-icon size="32" color="#b4282d" type="task_fill" />
          <h1>待发货</h1>
        </div>
        <div>
          <i-icon size="32" color="#b4282d" type="service_fill" />
          <h1>待收货</h1>
        </div>
        <div>
          <i-icon size="32" color="#b4282d" type="message_fill" />
          <h1>待评价</h1>
        </div>
        <div>
          <i-icon size="34" color="#b4282d" type="transaction_fill" />
          <h1>退款售后</h1>
        </div>
      </div>
    </div>
    <v-split></v-split>
    <i-cell-group class="cell">
        <i-cell class="item-cell" title="收货地址" is-link>
          <i-icon size="24" color="#b4282d" slot="icon" type="coordinates_fill" />
        </i-cell>
        <i-cell class="item-cell" title="我的收藏" is-link>
          <i-icon size="24" color="#b4282d" slot="icon" type="like_fill" />
        </i-cell>
        <i-cell class="item-cell" title="红包卡券" is-link>
          <i-icon size="24" color="#b4282d" slot="icon" type="coupons_fill" />
        </i-cell>
    </i-cell-group>
    <v-split></v-split>
    <i-cell-group class="cell">
        <i-cell class="item-cell" title="联系客服" is-link>
          <i-icon size="24" color="#b4282d" slot="icon" type="customerservice_fill" />
        </i-cell>
        <i-cell class="item-cell" title="欢迎评分" is-link>
          <i-icon size="24" color="#b4282d" slot="icon" type="praise_fill" />
        </i-cell>
        <i-cell class="item-cell" title="加盟合作" is-link>
          <i-icon size="24" color="#b4282d" slot="icon" type="shop_fill" />
        </i-cell>
    </i-cell-group>
  </div>
</template>

<script>
import vSplit from '@/components/split'
import qcloud from 'wafer2-client-sdk'
import config from '@/config'
import {showSuccess} from '@/utils'

export default {
  data () {
    return {
      userInfo: {}
    }
  },
  methods: {
    doLogin () {
      let user = wx.getStorageSync('userInfo')
      const self = this
      if (user) {
        self.userInfo = user
        return
      }
      qcloud.setLoginUrl(config.loginUrl)
      qcloud.login({
        success: res => {
          qcloud.request({
            url: config.userUrl,
            login: true,
            success (res) {
              wx.setStorageSync('userInfo', res.data.data)
              self.userInfo = res.data.data
              console.log(res.data.data)
              showSuccess('登录成功')
            },
            fail (res) {
              showSuccess('登录失败')
              console.log(res)
            }
          })
        },
        fail: err => {
          showSuccess('登录失败')
          console.log(err)
        }
      })
    }
  },
  mounted () {
    let user = wx.getStorageSync('userInfo')
    if (user) {
      this.userInfo = user
    }
  },
  components: {
    vSplit
  }
}
</script>

<style lang="less" scoped>
.header{
  height: 200rpx;
  background: rgba(180, 40, 45, 0.5);
  .content{
    display: flex;
    .user-info{
      flex: 1;
      span{
        font-size: 24px;
        color: #fff;
      }
    }
    .user-set{
      flex:  0 0 200rpx;
      text-align: center;
      line-height: 200rpx;
    }
  }
  .login-btn{
    width: 300rpx;
    height: 100rpx;
  }
}

.order{
  margin: 0 15rpx;
  background: #fff;
  border-radius: 15rpx;
  position: relative;
  .top{
    height: 100rpx;
    padding: 0 20rpx 0 20rpx;
    border-bottom: 1rpx solid #dddddd;
    .title{
    font-size: 34rpx;
    line-height: 100rpx;
    display: inline-block;
    }
    .more{
      font-size: 26rpx;
      line-height: 100rpx;
      float: right;
      color: #b3b3b3;
      display: inline-block;
      span{
        vertical-align: middle;
      }
    }
  }
  .wrap{
    height: 170rpx;
    width: 100%;
    display: flex;
    border: 20rpx solid #fff;
    box-sizing: border-box;
    border-radius: 15rpx;
    div{
      flex: 1;
      line-height: 75rpx;
      text-align: center;
    }
  }
}

.cell{
  .item-cell{
    font-size: 20px !important;
  }
}
</style>
